<template>
  <div class="shopNumber">
    <div class="shopheader">商品信息区域</div>购买数量：
    <div class="mui-numbox" :data-numbox-min="1" :data-numbox-max="max">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input class="mui-input-numbox" type="number" ref="Number" @change="change"/>
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>

    <div class="btn">
      <mt-button type="primary">立即购买</mt-button>
      <mt-button type="danger" @click="addCar">添加购物车</mt-button>
    </div>

    <div class="bottom"></div>

    <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
        <div class="ball" v-show="flag" ref="ball"></div>    
    </transition>
    <!-- 实现小球半场动画时不能正常运动
    问题原因：在app.vue模块中全局设置了transition动画，从而影响组件中的动画效果

    解决方法： 将app.vue的样式设置为局部 --》出现了底部bar不能正常显示
    解决办法：将app.vue中transition设置name属性，通过：
    .name-animate-enter-active,
    .name-animate-leave-active
    .name-animate-enter
    .name-animate-leave-to
    设置为局部的动画效果-->
  </div>
</template>

<script>
import { Transform } from "stream";
import { setTimeout } from 'timers';
// mui('.mui-numbox').numbox()

export default {
  data() {
    return {
      flag: false,
      max:5
    };
  },

  methods: {
    change(){
    },
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      const ballPosition = this.$refs.ball.getBoundingClientRect()
      const badgeposition = document.getElementById('badge').getBoundingClientRect()
      const ballX = badgeposition.left-ballPosition.left
      const ballY = badgeposition.top-ballPosition.top
      el.offsetWidth;
      el.style.transform = "translate("+ballX+"px,"+ballY+"px)";
      el.style.transition = "all .3s cubic-bezier(.4,-0.3,1,.68)";
      
      done()
    },
    afterEnter(el) {
      this.flag = !this.flag;
    },
    addCar(){
      this.flag = !this.flag
      this.$store.commit('add')
    }
  }
};
</script>

<style lang="scss" scoped>
.shopNumber {
  .shopheader,
  .bottom {
    height: 300px;
    background: pink;
  }
  .btn {
    margin-top: 5px;
  }
  .ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: red;
    position: absolute;
    left: 142px;
    top: 347px;
    z-index: 99;
  }
}
</style>